<template>
  <div>
    <div v-if="!showDetail && !showAdd" class="app-container">
      <div style="margin-left:20px">

        <el-form ref="queryForm" label-position="left" label-width="70px" inline size="small" >

          <el-form-item label="" >
            <el-select v-model="projectId" filterable class="filter-item" >
              <el-option v-for="item in projects" :key="item.code" :label="item.name" :value="item.code"/>
            </el-select>
          </el-form-item>
          <el-form-item label="" >
            <el-input v-model="queryInfo" style="width: 300px;" placeholder="请输入名称查询" @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="" >
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <data-table
        ref="dataTable"
        :key="tableKey"
        :border="false"
        :stripe="true"
        :url="url"
        row-key="id"
        size="small"
        style="width: 100%;">

        <el-table-column label="编号" prop="sn" align="center" width="100px" sortable/>
        <el-table-column label="姓名" prop="name" align="center" width="100px" sortable/>
        <el-table-column label="性别" prop="gender" align="center" width="100px">
          <template slot-scope="{row}">
            {{ row.gender | genderFilter }}
          </template>
        </el-table-column>
        <el-table-column label="登记学期" prop="regSemesterName" align="center" width="100px"/>
        <el-table-column label="登记所在学校" prop="regSchool" align="center" />
        <el-table-column label="登记年级" prop="regGrade" align="center" width="100px" />
        <el-table-column label="状态" prop="status" align="center" width="100px" />
        <el-table-column v-if="canEdit" label="操作" align="center" width="100px" class-name="small-padding fixed-width" >
          <template slot="header" slot-scope="scope">
            <el-button v-if="canAdd" type="text" size="mini" @click="handleCreate">添加</el-button>
            <template v-else>{{ scope.column.label }}</template>
          </template>
          <template slot-scope="scope" >
            <el-button v-if="canUpdate" type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
            <confirm-poptip v-if="canDelete" type="text" size="mini" @on-ok="handleDelete(scope.row)"/>
          </template>
        </el-table-column>
      </data-table>
    </div>
    <div v-if="showDetail" class="createPost-container">
      <div style="width:100%;" >
        <student-detail :id="detailId" @backClick="handelReturn" />
      </div>
    </div>
    <div v-if="showAdd" class="createPost-container">
      <div style="width:100%;" >
        <student-add @backClick="handelReturn" />
      </div>
    </div>
  </div>
</template>

<script>
import { remove } from '@/api/student'
import { getProjects, getGenders } from '@/api/public'
import waves from '@/directive/waves' // 水波纹指令
import studentDetail from './detail.vue'
import studentAdd from './add.vue'
import { canAdd, canUpdate, canDelete } from '@/utils'

const genderKeyValue = {}
export default {
  name: 'Students',
  directives: {
    waves
  },
  components: { studentDetail, studentAdd },
  filters: {
    genderFilter(gender) {
      return genderKeyValue[gender]
    }
  },
  data() {
    return {
      controllerName: 'Student',
      projects: [],
      genders: [],
      // url: '/students',
      projectId: null,
      showDetail: false,
      showAdd: false,
      detailId: null,
      tableKey: 0,
      queryInfo: null
    }
  },

  computed: {
    url() {
      let url = '/students'
      if (this.projectId) {
        url += '?projectId=' + this.projectId
      }
      return url
    },
    canEdit() {
      return this.canAdd || this.canUpdate || this.canDelete
    },
    canAdd() {
      return canAdd(this.$store.state, this.controllerName)
    },
    canUpdate() {
      return canUpdate(this.$store.state, this.controllerName)
    },
    canDelete() {
      return canDelete(this.$store.state, this.controllerName)
    }
  },
  watch: {
    projectId() {
      // this.getList()
    }
  },
  created() {
    this.getPublicData()
    // this.getList()
  },
  methods: {
    getPublicData() {
      this.getProjects()
      this.getGenders()
    },
    getProjects() {
      getProjects().then((res) => {
        this.projects = res.data
      })
    },
    getGenders() {
      getGenders().then((res) => {
        this.genders = res.data
        for (const item of res.data) {
          genderKeyValue[item.code] = item.name
        }
      })
    },
    handleQuery() {
      this.$refs.dataTable.setQuery(this.queryInfo)
    },

    handelReturn() {
      this.showDetail = false
      this.showAdd = false
      // this.getList()
    },

    handleCreate() {
      this.showAdd = true
    },
    handleUpdate(row) {
      this.showDetail = true
      this.detailId = row.id
    },

    handleDelete(row) {
      remove(row.id).then(() => {
        this.$notify({
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.$refs.dataTable.deleteData(row)
      })
    }

  }
}

</script>
